<template>
  <div>
    <div class="carousel">
      <el-carousel :interval="5000"
                   height="142px"
                   arrow="always">
        <el-carousel-item>
          <img src="../static/longSwiper.png"
               style="height:100%;width:100%;object-fit:cover">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../static/longSwiper.png"
               style="height:100%;width:100%;object-fit:cover">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="inf">
      <div class="left">
        <div class="buy">
          <div class="title">
            <div>极速选购通道</div>
          </div>
          <div class="con">
            <div v-for="productCategory in productCategoryList"
                 :key="productCategory.value"
                 class="font"
                 @click="goPage('/receptionProduct','categoryId',productCategory.value)">
              <span class="icon">▶　</span>
              <span class="label"> {{ productCategory.label }}</span>
            </div>
          </div>
        </div>
        <div class="pro">
          <div class="title">
            <div>特色产品选购</div>
          </div>
          <div class="con">
            <div v-for="productType in productTypeList"
                 :key="productType.value"
                 class="font"
                 @click="goPage('/receptionProduct','type',productType.value)">
              <span class="icon">▶　</span>
              <span class="label"> {{ productType.label }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <el-carousel :interval="5000"
                     height="280px"
                     arrow="always">
          <el-carousel-item>
            <img src="../static/swiper1.jpg"
                 style="height:100%;width:100%;object-fit:cover">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../static/swiper2.jpg"
                 style="height:100%;width:100%;object-fit:cover">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right">
        <div class="sese">
          <div class="title">溯源码查询</div>
          <div class="search">
            <el-input v-model="traceCode"
                      class="se"
                      placeholder="请输入内容"
                      prefix-icon="el-icon-search" />
          </div>
          <el-button style="margin:10px;"
                     @click="goTrace()">查询</el-button>
          <div class="se2">体验码：1758472867175014401</div>
        </div>
        <div class="sese2">
          <div class="titlex">
            溯源说明：
          </div>
          <div class="imgx">
            <img src="../static/1705313139172.jpg"
                 alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 热销产品 -->
    <div class="productRegion">
      <div class="region-title">
        <div class="title">热销产品</div>
        <div class="operation"
             @click="goPage('/receptionProduct')">更多>></div>
      </div>
      <div class="productList">
        <div v-for="product in productList"
             :key="product.id"
             class="product"
             @click="goProductDetail(product.productId)">
          <div class="product-name">{{ product.productName }}</div>
          <img class="product-img"
               :src="product.productPicture">
          <div class="product-price">￥{{ product.productPrice }} <span style="color: #888;font-size: 12px;font-weight: normal;">已售{{product.sellNumber}}</span></div>
        </div>
      </div>
    </div>
    <div style="clear:both" />
    <!-- 企业推介 -->
    <div class="companyRegion">
      <div class="region-title">
        <div class="title">企业推介</div>
        <div class="operation"
             @click="goPage('/receptionCompany')">更多>></div>
      </div>
      <div class="companyList">
        <div v-for="company in companyList"
             :key="company.id"
             class="company">
          <img class="company-img"
               :src="company.img">
          <div class="company-name">{{ company.companyName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getProductPage } from '@/api/mall/product'
import { getCompanyPage } from '@/api/company'
export default {
  data () {
    return {
      productCategoryList: [
        {
          label: '香料',
          value: 1
        },
        {
          label: '药品',
          value: 2
        },
        {
          label: '种子',
          value: 3
        }
      ],
      productTypeList: [
        {
          label: '绿色食品',
          value: 1
        },
        {
          label: '无公害食品',
          value: 2
        }
      ],
      productList: [],
      companyList: [],
      traceCode: ''
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    async load () {
      const data = await getProductPage({
        pageNum: 1,
        pageSize: 12
      })
      this.productList = data.data.records
      const companyData = await getCompanyPage({
        pageNum: 1,
        pageSize: 12
      })
      this.companyList = companyData.data.records
    },
    goPage (path, param, value) {
      this.$router.push(`${path}?${param}=${value}`)
    },
    goProductDetail (productId) {
      this.$router.push(`/productDetail?productId=${productId}`)
    },
    goTrace () {
      if (!this.traceCode) {
        this.$message({
          message: '请填写溯源码',
          type: 'error'
        })
        return
      }
      this.goPage('/trace', 'traceId', this.traceCode)
    }
  }
}
</script>

<style lang="scss" scoped>
.carousel {
  margin-top: 10px;

  height: 142px;
  width: 1100px;
}

.inf {
  margin-top: 10px;
  width: 1100px;
  height: 280px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    width: 200px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .buy {
      width: 200px;
      border: solid 1px #d3dce6;
      height: 165px;

      .title {
        width: 198px;
        height: 29px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(133, 194, 38);
      }

      .con {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 198px;

        .font {
          cursor: pointer;
          width: 150px;
          height: 27px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #d3dce6;

          .icon {
            color: #666666;
            margin-right: 20px;
          }
        }
      }
    }

    .pro {
      border: solid 1px #d3dce6;

      width: 200px;
      height: 110px;

      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 198px;
        height: 29px;
        background-color: rgb(133, 194, 38);
      }

      .con {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 198px;

        .font {
          cursor: pointer;
          width: 150px;
          height: 27px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #d3dce6;

          .icon {
            color: #666666;
            margin-right: 20px;
          }
        }
      }
    }
  }

  .center {
    width: 602px;
    height: 280px;
  }

  .right {
    width: 276px;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #99a9bf;

    .title {
      width: 274px;
      height: 29px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(133, 194, 38);
    }

    .sese {
      width: 274px;
      height: 156px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .search {
        width: 274px;
        height: 58px;
        display: flex;
        justify-content: center;
        align-items: end;

        .se {
          width: 234px;
          height: 28px;
        }
      }

      .se2 {
        color: #999;
        width: 274px;
        height: 39px;
        display: flex;
        justify-content: center;
        align-items: end;
      }
    }

    .sese2 {
      .titlex {
        width: 274px;
        height: 35px;
        text-indent: 30px;
        background-color: #d3dce6;
        color: #99a9bf;
        display: flex;
        align-items: center;
        font-weight: 800;
      }
      .imgx {
        width: 274px;
        height: 84px;
      }
    }
  }
}

.productRegion {
  width: 1100px;
  background-color: rgb(133, 194, 38);
  height: 35px;
  margin: 20px 0;
  .region-title {
    margin-bottom: 40px;
    padding: 5px;
    .title {
      float: left;
    }
    .operation {
      float: right;
      cursor: pointer;
    }
  }

  .productList {
    .product {
      cursor: pointer;
      border: 1px #99a9bf solid;
      width: 166.5px;
      height: 170px;
      margin: 10px 20px 0 0;
      float: left;
      padding: 10px;

      .product-name {
        font-weight: 600;
      }

      .product-img {
        width: 100%;
        height: 105px;
        object-fit: cover;
      }

      .product-price {
        color: red;
        font-weight: 600;
        font-size: 20px;
      }
    }

    .product:nth-child(6n) {
      margin-right: 0px;
    }
  }
}

.companyRegion {
  width: 1100px;
  background-color: rgb(133, 194, 38);
  height: 35px;
  margin: 20px 0;
  .region-title {
    margin-bottom: 40px;
    padding: 5px;
    .title {
      float: left;
    }
    .operation {
      float: right;
      cursor: pointer;
    }
  }

  .companyList {
    .company {
      cursor: pointer;
      border: 1px #99a9bf solid;
      width: 166.5px;
      height: 150px;
      margin: 10px 20px 0 0;
      float: left;
      padding: 10px;

      .company-name {
        font-weight: 600;
        text-align: center;
      }

      .company-img {
        width: 100%;
        height: 105px;
        object-fit: cover;
      }
    }

    .company:nth-child(6n) {
      margin-right: 0px;
    }
  }
}
</style>
